<style scoped>
  .upload-box a{width:4rem;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:.5rem .5rem 0;}
  .upload-box a p{text-align: center;}
  .pic-item{overflow:hidden;display:flex;justify-content:center;align-items: center;background-color:#f5f5f5;width:3.5rem;height:3.5rem;border-radius:10px;margin-bottom:10px;background-size:cover;background-position:center;}
  .pic-item i{font-size:48px;}
  .next-btn{display:block;border-radius:5px;height:45px;text-align: center;line-height: 45px;color:#fff;margin:20px 10px;}
</style>
<template>
  <wrap title="上传征信查询授权书">
    <div slot="page" class="light-bg">
      <input class="hide" type="file" ref="file" @change="upload" accept="image/*" capture="camera">
      <div class="flex flex-wrap upload-box">
        <a href="javascript:;" v-for="p in picture" @click="trigger(p.caaNickName)">
          <div class="pic-item" :style="{backgroundImage:'url('+p.caaUrl+')'}">
            <i class="fa fa-camera grey-9" aria-hidden="true" v-if="!p.caaUrl"></i>
          </div>
          <p>请上传{{p.caaName}}</p>
        </a>
      </div>
      <a href="javascript:;" :class="['next-btn',nextEnable?'blue-bg':'grey-9-bg','font-16']" @click="submit()">开始填写详细资料</a>
    </div>
  </wrap>
</template>
<script>
  import wrap from '../../components/wrap.vue'
  import '~/static/plugin/lrz.js'
  import mixins from '~/mixins'
  export default {
    mixins: [mixins],
    components: {wrap},
    data () {
      return {
        userId: 0,
        nextEnable: false,
        type: '',
        picture: [
          {
            caaNickName: 'accredit1',
            caaUrl: '',
            caaName: '征信查询授权书'
          },
          {
            caaNickName: 'accredit2',
            caaUrl: '',
            caaName: '征信查询授权书'
          }
        ]
      }
    },
    created () {
      const self = this
      self.userId = self.$route.params.userId
      self.orderId = self.$route.params.orderId
      self.$watch('picture', () => {
        if (self.picture[0].caaUrl && self.picture[1].caaUrl) {
          self.nextEnable = true
        } else {
          self.nextEnable = false
        }
      }, {deep: true})
    },
    methods: {
      trigger (type) {
        const self = this
        self.type = type
        self.$refs.file.click()
      },
      upload (e) {
        const self = this
        const file = e.target.files[0]
        if (file.length === 0) return
        /* eslint-disable*/
        lrz(file, { width: 1000 }).then(img => {
          let form = new FormData()
          form.append('image', img.file)
          form.append('length', img.fileLen)
          self.request({
            act: 'uploadImg',
            body: form
          }).then(res => {
            if (res.code == 0) {
              self.setUrl(res.data.url)
            } else {
              layer.open({content: res.userMsg, skin: 'msg', time: 2})
            }
          })
        })
      },
      setUrl (url) {
        const self = this
        self.picture.forEach(item => {
          if (self.type == item.caaNickName) {
            item.caaUrl = url
          }
        })
      },
      submit () {
        const self = this
        if (!self.nextEnable) {
          return
        }
        self.picture.forEach(item => {
          item.caaFlag = 2
          item.caId = self.orderId
        })
        let data = JSON.stringify(self.picture)
        layer.open({type: 2, shadeClose: false})
        this.request({
          act: 'saveAccredit',
          body: {data}
        }).then(res => {
          layer.closeAll()
          if (res.code == 0) {
            self.$router.replace('/fill/bank/' + self.userId + '-' + self.orderId)
          } else {
            layer.open({content: res.userMsg, skin: 'msg', time: 2})
          }
        })
      }
    }
  }
</script>
